<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
            font: 400 15px/1.8 "Lato", sans-serif;
            color: #777;
        }

        .bgimg-1 {
            background-image: url("../img/Tesla\ \(15\).jpeg");
            height: 100%;
            position: relative;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .caption {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            text-align: center;
        }
        .caption span.border {
            background-color: #111;
            color: #fff;
            padding: 18px;
            font-size: 25px;
            letter-spacing: 10px;
            text-transform: uppercase;
        }
    </style>
</head>

<body>

    <div class="bgimg-1">
        <div class="caption">
            <span class="border">    tesla modal 3  </span><br>
        </div>
    </div>



    

    	
    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   

    必知必会 

    <div class="bgimg-1">
        <div class="caption">
            <span class="border">    tesla modal 3  </span><br>
        </div>
    </div>

    原理是在父容器上设置 背景图片: , 并且设置为 position: relative
    .bgimg-1 {
        background-image: url("img/Tesla\ \(15\).jpeg");
        height: 100%;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .caption {               => 居中
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        text-align: center;
    }
    .caption span.border {
        background-color: #111;
        color: #fff;
        padding: 18px;
        font-size: 25px;
        letter-spacing: 10px;
        text-transform: uppercase;
    }


</xmp>


</body>
</html>


